<template>
    <div>
        <book-list-head></book-list-head>
        <side-bar></side-bar>
        <Input suffix="ios-search" size='large' v-model="searchInfo" @on-enter="searchBook()" placeholder="搜索书名，作者，出版社" class="search_box" />
        <div class="book_list">
            <div class="book_content">
                <Card class="book_item" v-for="(item, index) in showList" :key="index" @click.native="bookDetail(index)">
                    <img class="book_cover" src='../../assets/bookType6.jpg'>
                    <div class="book_info">
                        <font class="book_title">书名：{{item.bookName}}</font>
                        <font class="book_author">作者：{{item.bookauthor}}</font>
                        <font class="book_price">价格：&nbsp;&nbsp;<font style="color: red; font-size: 26px">￥{{item.bookPrice}}</font></font>
                    </div>
                </Card>
            </div>
            <Page @on-change="changePage" :current="1" :page-size="pageSize" show-total show-elevator :total="bookList.length" />
        </div>
        <my-footer></my-footer>
    </div>
</template>

<script>
import bookListHead from '../../components/header'
import sideBar from '../../components/sideBar'
import myFooter from '../../components/footer'
import { userService } from '../../service/userService'

export default {
    data() {
        return {
            bookList: [
                {
                    bookName: 'ddd',
                    bookauthor: 'aaaa',
                    bookPrice: 130,
                    bookId: 2222
                },
                
                ],
            showList: [],
            nowPage: 1,
            pageSize: 10,
            searchInfo: '',
        }
    },
    mounted() {
        this.showList = this.bookList.slice(0, 10);
    },
    watch: {
        nowPage: function () {
            this.showList = this.bookList.slice((this.nowPage - 1) * this.pageSize, this.nowPage * this.pageSize)
        }
    },
    components: { 
        bookListHead,
        sideBar,
        myFooter 
    },
    methods: {
        changePage(page) {
            this.nowPage = page;
        },
        bookDetail(index) {
            this.$router.push({
                path: '/bookDetail',
                query: {
                    bookId: this.showList[index].bookId
                }
            })
        },
        searchBook() {
            this.$router.push({
                path: '/bookSearch',
                query: {
                    searchInfo: this.searchInfo
                }
            });
        }
    },
}
</script>

<style scoped>
.search_box{
    margin-left: 1460px;
    margin-top: 115px;
    width: 199px;
}
.book_list{
    width: 1200px;
    height: 750px;
    margin-top: 25px;
    margin-left: 470px;
    text-align: center
}
.book_content{
    width: 100%;
    height: 660px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.book_item{
    width: 230px;
    height: 310px;
    margin-right: 10px;
    cursor: pointer;
}
.book_cover{
    width: 150px;
    height: 185px;
    margin-top: -5px;
}
.book_info{
    width: 100%;
    padding-left: 21px;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.book_title{
    margin-top: 5px;
    font-size: 17px;
}
.book_author{
    margin-top: 7px;
    font-size: 17px;
    color: gray;
}
.book_price{
    margin-top: 2px;
    font-size: 17px;
}
</style>
